
<template>
  <div>

    <div class="cultiavtion">
      <div class="cult-img">
        <img src="../../assets/img/养成3.png" alt="" />
      </div>

      <van-tabs v-model:active="active" sticky color="#39d167">
        <van-tab title="介绍">
          <div class="cult">
            <div class="cult-box">
              <div class="cult-left"> <span>•</span> 难度系数:</div>
              <div class="cult-right">
                <van-icon name="star" class="star" />
                <van-icon name="star"  class="star"/>
              </div>
            </div>

            <div class="cult-box">
              <div class="cult-left1"> <span>•</span> 适用人群:</div>
              <div class="cult-right1">
                0~1岁宝宝的妈妈
              </div>
            </div>

            <div class="cult-box1">
              <div class="cult-left"> <span>•</span> 预期效果:</div>
              <div class="cult-right">
              学会0~1岁宝宝的日常护理
              </div>
            </div>
            <div class="images">
             <p>宝宝刚出生，激动了吧！</p>
             <p>面对吐奶、吃手、感冒、发热、黄疸、便秘、腹泻、咳嗽、过敏、湿疹……蒙圈了吧！</p>
             <p>面对奶嘴、奶瓶、尿布、辅食、疫苗……迷茫了吧！</p>
             <p>别担心，下面就为您支一记贴心妙招。</p>
             <p>微博上最受欢迎的医生妈妈欧茜为您精心制定了0~1岁育儿方案，每天一条小知识，教你应对新生宝宝的日常。</p>
              <p>同时春雨为您精选美国儿科学会（AAP）育儿百科的育儿知识，帮助你快速成为育儿达人，从此再也不用手忙脚乱。</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="目录">
          <div class="day">
          <div class="day1"><b>共360日</b></div>
          <div class="day2">
          <van-collapse v-model="activeNames">
  <van-collapse-item title="第1-4周" name="1" class="bod">
    <div class="ule">
    <ul>
            <li>01日</li>
            <li class="hj">需要分清自己的皮肤类型</li>
          </ul>
           <ul>
            <li>02日</li>
            <li class="hj">选择合适的洗面奶</li>
          </ul>
           <ul>
            <li>03日</li>
            <li class="hj">学会正确的洗脸步骤</li>
          </ul>
           <ul>
            <li>04日</li>
            <li class="hj">这样选择护肤类化妆品</li>
          </ul>
           <ul>
            <li>05日</li>
            <li class="hj">学会选择合适的爽肤水</li>
          </ul>
           <ul>
            <li>06日</li>
               <li class="hj">精华素需要这样使用</li>
          </ul>

           <ul>
            <li>07日</li>
            <li class="hj">选择合适的眼部化妆品</li>
          </ul>
           <ul>
            <li>08日</li>
            <li class="hj">眼部保养要这样做</li>
          </ul>
           <ul>
            <li>09日</li>
            <li class="hj">睡前一定要卸妆！</li>
          </ul>
           <ul>
            <li>10日</li>
            <li class="hj">忍住！一整日不挤痘痘，</li>
          </ul>
           <ul>
            <li>11日</li>
            <li class="hj">可以这样对付痘痘！</li>
          </ul>
           <ul>
            <li>12日</li>
            <li class="hj">矿泉喷雾要这样用</li>
          </ul>
           <ul>
            <li>13日</li>
            <li class="hj">选择适合你的面膜</li>
          </ul>
           <ul>
            <li>14日</li>
            <li class="hj">化妆品要这样保存</li>
          </ul>
           <ul>
            <li>15日</li>
            <li class="hj">使用彩妆类化妆品需注意这些事情</li>
          </ul>
          </div>
  </van-collapse-item>
  <van-collapse-item title="第5-8周" name="2" class="bod">
    技术无非就是那些开发它的人的共同灵魂。
  </van-collapse-item>
  <van-collapse-item title="第9-12周" name="3" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第13-16周" name="4" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第17-20周" name="5" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第13-16周" name="6" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第17-20周" name="7" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第21-24周" name="8" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第25-28周" name="9" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第29-32周" name="10" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第33-36周" name="11" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第37-40周" name="12" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第41-44周" name="13" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第45-48周" name="14" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
   <van-collapse-item title="第49-52周" name="15" class="bod">
    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
  </van-collapse-item>
</van-collapse>
          </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

     <div class="cult-btn">
      <div class="button"  v-if="flag==false" @click="addji">加入计划</div>
      <div class="but"  v-else>
       <span class="look">查看今天任务</span>
       <span class="cancel" @click="handiefalse">取消计划</span>
      </div>
    </div>
  </div>
</template>

  <script setup lang='ts'>
import { ref } from 'vue'
   const activeNames = ref(['1']);
const active = ref(0)
const onClickLeft = () => history.back()
const flag=ref(false);
const addji=()=>{

  flag.value=true;
  console.log('加入计划');
  localStorage.setItem('flag',JSON.stringify(flag.value));

}
const handiefalse=()=>{
  flag.value=false;


}
</script>

  <style lang="scss" scoped>
.cultiavtion {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  // background-color: yellow;
  .cult-img {
    width: 100%;
    height: 150px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .cult {
    .cult-box {
      width: 100%;
      height: 40px;
    }
    .cult-box1 {
      width: 100%;
      height: 37px;
    }
    .images{
      width: 95%;
      height:420px;
      margin-top: 25px;
      margin-left: 10px;
     p{
      line-height: 28px;
     }
    }
    .cult-left {
      float: left;
      height: 40px;
      width: 30%;
      // background-color: blue;
      text-align: center;
      padding-top: 10px;
      span{
        color: #39d167;
      }
    }
    .cult-left1 {
      float: left;

      width: 30%;
      // background-color: blue;
      text-align: center;

      span{
        color: #39d167;
      }
    }
    .cult-right {
      float: left;
      height: 30px;
      width: 70%;
      // background-color: rgb(24, 148, 96);
      text-align: left;
      padding-top: 10px;
      .star{
        color: #ffa800;
      }

    }
     .cult-right1 {
      float: left;
      height: 15px;
      width: 70%;
      // background-color: rgb(24, 148, 96);
      text-align: left;
      padding-top: -10px;


    }
  }
}

.cult-btn {
  position:fixed;
  width: 100%;
  height: 90px;
  // text-align: center;
  padding: 10px;
  background-color: #fff;
  bottom: 0;
  .button {
    width: 100%;
    height: 45px;
    background-color: #39d167;
    text-align: center;
    line-height: 45px;
    color: white;
    font-weight: 550;
    font-size: 18px;
    opacity: 1;
  }
  .but{
      width: 100%;
    height: 45px;


    line-height: 45px;
    color: white;
    font-weight: 550;
    font-size: 18px;
  // opacity: 0;
   display: flex;

   .look{
    width: 180px;
    display: inline-block;
     background-color: #39d167;
     text-align: center;
   }
   .cancel{
    width: 180px;
    display: inline-block;
    border: 1px solid #39d167;
    color: #39d167;
    text-align: center;
    margin-left: 10px;

   }
  }
}
.day{
  width: 100%;
  height: 100%;
  margin-top: 10px;
  margin-left: 15px;

  .day1{
    width: 100%;
    height: 30px;
    font-size: 19px;
  }
  .day2{
    width: 100%;
    height: 800px;
    margin-top: 15px;
    overflow-y: scroll;
    .bod{
      font-weight:800;

      .ule{
           ul{
      height: 50px;
      display: flex;
     justify-items: center;
   border-bottom: 1px solid #e5e5e5;

      li{
       color: #a7a7a7;
       margin-top: 10px;
        //默认字体
       font-family: '宋体';
       font-size: 16px;
      }
      .hj{
        margin-left: 25px;
      }
    }
      }
    }
  }
}

</style>
